<template>
    <div class="por timeSelect" @mouseover="selectStyle" @mouseout="outStyle">
        <dl class="timePoa">
            <dd style="zIndex:200" v-for="(item,index) in List" :key="index" @click="TimeClick(item)">{{item.name}} {{nowTime | formaDate(item.name,te)}}</dd>
        </dl>
        {{nameList}} {{nowTime | formaDate(nameList,te)}}
    </div>
</template>
<script>
export default {
  data() {
    return {
      nowTime: "",
      timeset: null,
      nameList:this.$i18n.t('m.Beijing_time'),
      List:[
          {name:this.$i18n.t('m.Beijing_time')},
          {name: this.$i18n.t('m.US_East_Savings')},
          // {name: this.$i18n.t('m.US_Summer_Day')}
      ]
    };
  },
  created() {
    
  },
  methods: {
    setIntervalList(){
      var _this = this;
      clearInterval(_this.timeset);
      _this.timeset = setInterval(function() {
        _this.nowTime = new Date();
      }, 1000);
    },
    TimeClick(item){
        this.nameList = item.name ;
    },
     selectStyle() {
      $(".timePoa").stop().slideDown(500);
    },
    outStyle() {
      $(".timePoa").stop().slideUp(500);
    },
  },
  mounted() {
    this.setIntervalList()
    
  },
  filters: {
    //设置一个函数来进行过滤
    formaDate: function(value,name,te) {
        var num;
        if(name== te('m.Beijing_time')){
            num=0
        }else if(name== te('m.US_East_Savings')){
            num=13
        }else if(name== te('m.US_Summer_Day')){
            num=13
        }
      //创建一个时间日期对象
      var date = new Date().getTime();
      date = date - num*3600000
      date = new Date(+date)
      var year = date.getFullYear(); //存储年
      var month =
        date.getMonth() + 1 < 10? ("0" + (date.getMonth() + 1)): (date.getMonth() + 1); //存储月份
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); //存储日期
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); //存储时
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); //存储分
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //存储秒
      //返回格式化后的日期
      // return (year +"年" +month +"月" +day +"日" +hours +"时" +minutes +"分" +seconds +"秒");
      return (month +"/" +day +" "+hours +":" +minutes +":" +seconds);
    }
  },
  beforeDestroy: function() {
    //实例销毁前清除定时器
      clearInterval(this.timeset);
  }
};
</script>
<style lang="less" scoped>
.timeSelect{
    // padding-right: 10px;
    //background: url(~@/assets/img/img_3.png) no-repeat right center;
    background-size: 16px;
    cursor: pointer;
    .timePoa{
        position: absolute;
        bottom: 38px;
        left: 0;
        cursor: pointer;
        background: @sideColor;
        width:100%;
        padding-left: 5px;
        display: none;
    }
}
</style>